<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>spRent</title>
    <script src="/static/axios.min.js"></script>
    <script src="/static/vue.min.js"></script>
    <link rel="stylesheet" href="/static/base.css">
    <link rel="stylesheet" href="/static/indexcommon.css">
    <link rel="stylesheet" href="/static/list.css">
</head>
<body>
<div id='app'>
    <div class="topbg headerTop clearfix">
        <div class="headbg">
            <div class="head detailHead clearfix">
                <h1 class="fl">
                    <a><img src="https://sh.sofang.com/image/newimage/logo.png" alt="搜房网"></a>
                </h1>
                <ul class="fl nav">
                    <li>
                        <a href="/system/house/">首页</a>
                    </li>
                    <li>
                        <a href="/system/house/esfSale" class="">二手房出售</a>
                    </li>
                    <li>
                        <a href="/system/house/esfRent" class="">二手房出租</a>
                    </li>
                    <li>
                        <a href="/system/house/xzlRent" class="">写字楼出售</a>
                    </li>
                    <li>
                        <a href="/system/house/xzlSale" class="">写字楼出租</a>
                    </li>
                    <li>
                        <a href="/system/house/spSale" class="">商铺出售</a>
                    </li>
                    <li>
                        <a href="/system/house/spRent" class="default">商铺出租</a>
                    </li>
                    <li>
                        <a href="/system/house/goJisuanqi" class="">房贷计算器</a>
                    </li>
                </ul>
                <ul class="fr top_r">
                    <li class="logintip user">
                        <a target="_blank">登录/注册</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="village_con">
        <div class="search_con clearfix">
            <div class="village_search clearfix">
                <form action="/esfsale/area" id="build" method="get">
                    <input type="text" class="txt fl" tp="spsale" autocomplete="off" id="keyword" v-model="title"
                           @click="initTitle" name="kw" placeholder="请输入关键字(楼盘名)">
                    <input type="button" @click="getDataList" id="searchBtn" class="btn fl" value="搜索">
                </form>
            </div>
            <div class="mai mai1" style="display: none;">
                <ul class="search_lsit" style="display: none;">
                </ul>
            </div>
        </div>
    </div>
    <br>
    <div class="list_info clearfix">
        <div class="list_l">
            <div class="tab_nav">
                <p class="tab_l">
                    <span class="house" alt="">全部房源</span>
                </p>
                <p class="tab_r">
                    <a class="click">默认</a>
                    <a class="sort_icon "><span alt="1">租金</span><i></i></a>
                    <a class="sort_icon "><span alt="1">面积</span><i></i></a>
                </p>
            </div>
            <div class="list list_free" v-for="item in dataList" :key="item">
                <dl>
                    <dt>
                        <a target="_blank"><img
                                :src="item.houseImg" alt="房源图片"></a>
                    </dt>
                    <dd class="house_msg">
                        <p class="name">
                            <a target="_blank" @click="detail(item.id)">{{item.houseName}}</a>
                        </p>
                        <div class="house_info no_back">
                            <p class="area clearfix">
                                <a><strong>{{item.unit}}</strong></a>
                                <span title="..." class="address">{{item.address}}</span>
                                <a target="_blank">
                                    <i></i>
                                </a>
                            </p>
                            <p class="type clearfix">
                                <span>{{item.area}}平米</span>
                                <span class="dotted"></span>
                                <span>{{item.room}}
                                室
                                {{item.hall}}
                                厅</span>
                                <span class="dotted"></span>
                                <span>{{item.atFloor}}/{{item.totalFloor}}层</span>
                                <span class="dotted"></span>
                                <span>{{item.direction}}</span>
                                <span class="dotted"></span>
                                <span>建筑年代：</span>
                                <span>{{item.constructYear}}年</span>
                            </p>
                            <p class="tag clearfix">
                                <span class="tag_nav" v-for="tag in item.tags" :key="tag">{{tag}}</span>
                            </p>
                        </div>
                    </dd>
                    <dd class="house_price">
                        <p class="price">
                            <span class="font">{{item.totalPrice}}</span>万
                        </p>
                        <p class="junjia">
                            {{item.totalPrice * 10000 / item.area}}元/㎡
                        </p>
                        <p class="show">
                            <a>
                                <span class="focus" value="2022070000006283,2,3,0"><i class="follow"></i><span>关注</span></span></a>
                        </p>
                    </dd>
                </dl>
            </div>
            <div class="page_nav">
                <ul>
                    <li class="click">1</li>
                    <li><a alt="2" class="page">2</a></li>
                    <li><a alt="3" class="page">3</a></li>
                    <li><a alt="4" class="page">4</a></li>
                    <li><a alt="5" class="page">5</a></li>
                    <li class="no_border">...</li>
                    <li><a alt="200" class="page">200</a></li>
                    <li class="right"><a alt="2" class="page">下一页</a></li>
                    <li><a alt="200" class="page">尾页</a></li>
                </ul>
            </div>
        </div>
        <div class="house_r">
            <div class="house">
                <a class="entrust"><i></i>出租</a>
            </div>
            <div class="broker_house">
                <h2><a>新盘推荐&gt;&gt;</a></h2>
                <dl>
                    <a target="_blank">
                        <dt>
                            <img src="/static/css/img/招租.png" alt="招租">
                        </dt>
                        <dd>
                            <p class="name_h">广告位招租</p>
                            <p class="house_price">
                                <!--                                <span class="fl">-->
                                <!--                                    住宅 </span>-->
                                <!--                            <span class="fr">-->
                                <!--                                    40476元/㎡-->
                                <!--                                </span>-->
                            </p>
                        </dd>
                    </a>
                </dl>
                <dl>
                    <a target="_blank">
                        <dt>
                            <img src="/static/css/img/招租.png" alt="招租">
                        </dt>
                        <dd>
                            <p class="name_h">广告位招租</p>
                            <p class="house_price">
                                <!--                                <span class="fl">-->
                                <!--                                    住宅 </span>-->
                                <!--                            <span class="fr">-->
                                <!--                                    40476元/㎡-->
                                <!--                                </span>-->
                            </p>
                        </dd>
                    </a>
                </dl>
                <dl>
                    <a target="_blank">
                        <dt>
                            <img src="/static/css/img/招租.png" alt="招租">
                        </dt>
                        <dd>
                            <p class="name_h">广告位招租</p>
                            <p class="house_price">
                                <!--                                <span class="fl">-->
                                <!--                                    住宅 </span>-->
                                <!--                            <span class="fr">-->
                                <!--                                    40476元/㎡-->
                                <!--                                </span>-->
                            </p>
                        </dd>
                    </a>
                </dl>
            </div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                title: sessionStorage.getItem("title"),
                dataList: [],
                pageIndex: 1,
                pageSize: 10,
                totalPage: 0,
            }
        },
        methods: {
            initTitle() {
                sessionStorage.setItem("title","");
            },
            getDataList() {
                axios.get(`/system/house/esfSaleList?title=${this.title}&category=2&type=1`).then(({data}) => {
                    this.dataList = data.data
                })
            },
            detail(id){
                location = "/system/house/spRentDetail/"+id;
            }
        },
        created() {
            this.getDataList()
        }
    })
</script>
</body>
</html>
